<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
// import api from "@/api/api";

let map = null;

onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "f57d700708ffcf4676b3a22e2baa0fb8",
    };
    AMapLoader.load({
        key: "ae7d37a5d768e5a08aa3449a6f7f727a", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.ToolBar", "AMap.ControlBar"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            // var map = new AMap.Map("container", {
            //     center: [121.045332, 31.19884],
            //     zoom: 8.8
            // });

            // function addPolygon(data) {
            //     let polygon = new AMap.Polygon({
            //         path: data,
            //         fillColor: '#ccebc5',
            //         strokeOpacity: 1,
            //         fillOpacity: 0.5,
            //         strokeColor: '#2b8cbe',
            //         strokeWeight: 1,
            //         strokeStyle: 'dashed',
            //         strokeDasharray: [5, 5],
            //     });
            //     polygon.on('mouseover', () => {
            //         polygon.setOptions({
            //             fillOpacity: 0.7,
            //             fillColor: '#7bccc4'
            //         })
            //     })
            //     polygon.on('mouseout', () => {
            //         polygon.setOptions({
            //             fillOpacity: 0.5,
            //             fillColor: '#ccebc5'

            //         })
            //     })
            //     map.add(polygon);
            //     api.get('/shanghai.json').then(res => {
            //         addPolygon(shanghai);
            //     })
            //     api.get('/suzhou.json').then(res => {
            //         addPolygon(suzhou);
            //     })
            //     api.get('/wuxi.json').then(res => {
            //         addPolygon(wuxi);
            //     })
            // }


            var map = new AMap.Map("container", {
                center: [116.433322, 39.900256],
                zoom: 14
            });

            var circle = new AMap.Circle({
                center: [116.433322, 39.900255],
                radius: 1000, //半径
                borderWeight: 3,
                strokeColor: "#FF33FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillOpacity: 0.4,
                strokeStyle: 'dashed',
                strokeDasharray: [10, 10],
                // 线样式还支持 'dashed'
                fillColor: '#1791fc',
                zIndex: 50,
            })

            map.add(circle);


        })


        .catch((e) => {
            console.log(e);
        });
});

onUnmounted(() => {
    map?.destroy();
});
</script>

<template>
    <div id="container"></div>
</template>

<style scoped>
#container {
    width: 100%;
    height: 800px;
}
</style>
